<!-- src/components/Chart6.vue -->
<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      topReceivers: [],
      chart: null,
      updateInterval: null
    };
  },
  async mounted() {
    await this.loadData();
    this.initChart();
    // 每30秒刷新一次数据
    this.updateInterval = setInterval(this.loadData, 30000);
  },
  beforeDestroy() {
    if (this.updateInterval) {
      clearInterval(this.updateInterval);
    }
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    async loadData() {
      try {
        const data = await fetchData('getsix');
        this.topReceivers = data;
        if (this.chart) {
          this.updateChart();
        }
      } catch (error) {
        console.error('Error fetching chart data:', error);
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.updateChart();
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      this.chart && this.chart.resize();
    },
    updateChart() {
      // 使用柔和的渐变色系
      const colorPalette = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#8BD8E2' },
          { offset: 1, color: '#4AA9C5' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#A6E3A1' },
          { offset: 1, color: '#68D391' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#F9C2A2' },
          { offset: 1, color: '#F6AD55' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#F9A8D4' },
          { offset: 1, color: '#F687B3' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#C4B5FD' },
          { offset: 1, color: '#9F7AEA' }
        ])
      ];

      const option = {
        title: {
          text: '消息接收排行榜',
          subtext: '今日最受欢迎的Top 10用户',
          left: 'center',
          textStyle: {
            color: '#2D3748',
            fontSize: 20,
            fontWeight: '600',
            fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
          },
          subtextStyle: {
            color: '#718096',
            fontSize: 14,
            fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            const data = params[0];
            return `
              <div style="font-weight:600;margin-bottom:5px;color:#2D3748">${data.name}</div>
              <div style="display:flex;align-items:center">
                <span style="display:inline-block;width:12px;height:12px;background:${data.color};border-radius:2px;margin-right:8px"></span>
                <span style="color:#4A5568">接收消息数: </span>
                <span style="font-weight:600;margin-left:5px;color:#2D3748">${data.value}</span>
              </div>
            `;
          },
          backgroundColor: 'rgba(255,255,255,0.96)',
          borderColor: '#E2E8F0',
          borderWidth: 1,
          padding: [12, 16],
          extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.08);border-radius: 8px;'
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '8%',
          top: '22%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.topReceivers.map(user => user.userName),
          axisLine: {
            lineStyle: {
              color: '#E2E8F0'
            }
          },
          axisLabel: {
            color: '#4A5568',
            fontSize: 12,
            interval: 0,
            rotate: 30,
            margin: 15,
            fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#E2E8F0'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E2E8F0'
            }
          },
          axisLabel: {
            color: '#718096',
            fontSize: 12,
            fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
          },
          splitLine: {
            lineStyle: {
              color: '#EDF2F7',
              type: 'solid'
            }
          }
        },
        series: [{
          name: '接收消息数',
          type: 'bar',
          barWidth: '50%',
          data: this.topReceivers.map((user, index) => ({
            value: user.receiverMsgCnt,
            itemStyle: {
              color: colorPalette[index % colorPalette.length]
            }
          })),
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
            shadowColor: 'rgba(0, 0, 0, 0.08)',
            shadowBlur: 8,
            shadowOffsetY: 4
          },
          emphasis: {
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.15)',
              shadowBlur: 12,
              shadowOffsetY: 6,
              opacity: 0.9
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: '{c}',
            color: '#2D3748',
            fontSize: 12,
            fontWeight: '600',
            fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
          },
          animationType: 'elastic',
          animationEasing: 'cubicOut',
          animationDelay: function (idx) {
            return idx * 100 + 200;
          }
        }],
        backgroundColor: '#FFFFFF',
        animationDuration: 1200,
        textStyle: {
          fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
        }
      };

      this.chart.setOption(option, true);

      // 添加点击交互
      this.chart.on('click', (params) => {
        console.log('用户点击了:', params.name);
      });
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 450px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 16px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.chart-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
</style>